<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<link type="text/css"
	href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="css/sytle.css" rel="stylesheet" type="text/css" />
<title>朝阳教堂</title>
<script>
	$(function() {
		getMusicList();
	});

	function getMusicList() {
		var url = "getMusicList";
		$.getJSON(url, null, function callback(data) {
			$.each(data, function(i, n) {
				var row = $("#mp3list").clone();
				row.find("#name").text(n.id);
				row.find("#songSheet").text(n.group);
				row.find("#lyrics").text(n.datetime);
				row.find("#play").text(n.work);
				$("#mp3table").append(row);
			});
		});
	}
</script>
</head>
<body>
	<div class="container">
	<div class="mp3list">
		<h1>&nbsp;</h1>
		<h1>mp3下载</h1>
		<table id="mp3table" width="800" border="1" cellspacing="0"
			style="border-collapse: collapse">
			<tr>
				<td>歌名</td>
				<td>歌谱</td>
				<td>歌词</td>
				<td>播放</td>
			</tr>
			<tr id="mp3list">
				<td id="name"></td>
				<td id="songSheet"></td>
				<td id="lyrics"></td>
				<td id="play"></td>
			</tr>
		</table>
		</div>
		<h1>&nbsp;</h1>
		<h1>&nbsp;</h1>
	</div>
</body>
</html>